<%@page import="com.common.util.SN_GUID"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	request.setAttribute("basePath", basePath);
	request.setAttribute("accept", request.getParameter("accept"));
	//request.setAttribute("fileGroupId","0123456789");
	request.setAttribute("fileGroupId",request.getParameter("fileGroupId"));
	request.setAttribute("types",request.getParameter("type"));
	request.setAttribute("fn", request.getParameter("fn"));
	//request.setAttribute("fn", "123");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>附件上传</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support, progress bars, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<jsp:include page="/scripts/jquery/index.html"></jsp:include>
<jsp:include page="/scripts/bootstrap/index.html"></jsp:include>
<link rel="stylesheet" href="${basepath }style/default.css">
<link rel="stylesheet" href="${basepath }scripts/fileupload/css/style.css">
<link rel="stylesheet" href="${basepath }scripts/fileupload/css/jquery.fileupload.css">
<link rel="stylesheet" href="${basepath }scripts/fileupload/css/jquery.fileupload-ui.css">

<script type="text/javascript" src="${basepath }scripts/jquery/jquery.js"></script>

<script type="text/javascript" src="${basepath }scripts/fileupload/js/vendor/tmpl.min.js"></script>
<script type="text/javascript" src="${basepath }scripts/fileupload/js/vendor/load-image.all.min.js"></script>
<script type="text/javascript" src="${basepath }scripts/fileupload/js/vendor/load-image.all.min.js"></script>
<script type="text/javascript" src="${basepath }scripts/fileupload/js/vendor/canvas-to-blob.min.js"></script>
<script type="text/javascript" src="${basepath }scripts/fileupload/js/vendor/jquery.blueimp-gallery.min.js"></script>

<script type="text/javascript" src="${basepath }scripts/fileupload/js/vendor/jquery.ui.widget.js"></script>
<script type="text/javascript" src="${basepath }scripts/fileupload/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="${basepath }scripts/fileupload/js/jquery.fileupload.js"></script>
<script src="${basepath }scripts/fileupload/js/jquery.fileupload-process.js"></script>
<script src="${basepath }scripts/fileupload/js/jquery.fileupload-image.js"></script>
<script src="${basepath }scripts/fileupload/js/jquery.fileupload-audio.js"></script>
<script src="${basepath }scripts/fileupload/js/jquery.fileupload-video.js"></script>
<script src="${basepath }scripts/fileupload/js/jquery.fileupload-validate.js"></script>
<script type="text/javascript" src="${basepath }scripts/fileupload/js/cors/jquery.xdr-transport.js"></script>
<script src="${basepath }scripts/fileupload/js/jquery.fileupload-ui.js"></script>
<script src="${basepath }scripts/fileupload/js/main.js"></script>
<!--
<script src="http://blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script>
<script src="http://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<script src="http://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
-->
<script>
var type = "";
/**
* 允许上传的附件类型使用"jpg,docx,xlx......"方式传参
*/
$(function(){
  	type = "${types}";
  	var s = "";
  	if(type != "*"){
  		var arr = type.split(",");
  		for(var i = 0 ; i < arr.length ; i++){
  			if(i == 0){
  				s = arr[i];
  			}else{
  				s += "|" + arr[i];
  			}
  		}
  	}
  	 var regs = new RegExp(s,'i');
	 if(type != "*"){
	 	$('#fileupload').fileupload('option', { 
	 		acceptFileTypes: regs
	 	});
	 }
});
	
	//保存文件信息到数据库
	function confirm_() {
		var isUpload = false;//页面是否有上传的文件存在
		var result = false;//是否有为删除或未上传的文件
		//还要将文件保证到数据 库中
		var ids = new Array();
		var names = new Array();
		//返回当前对象上传文件的信息  数据中存fileGroupId 、 fileList
		var rs_data={};
		rs_data['fileGroupId'] = '${fileGroupId}';
		var rs_fileList = [];
		var count = 0;
		$("#content tr").each(function(i, o) {
			//console.debug(o);
			if(o.id != null && o.id != "" && o.id != 'undefined'){
				//ids[i] = o.id;
				ids.push(o.id);
				//names[i] =o.title;
				names.push(o.title);
				rs_fileList[count]={"id":o.id,"name":o.title};
				count++;
				//页面存在上传文件
				isUpload = true;
			}else{
				result = true;
			}
		});
		//原已上传的文件信息
		$("#content0 tr").each(function(i, o) {
			if(o.id != null && o.id != "" && o.id != 'undefined'){
				rs_fileList[count]={"id":o.id,"name":o.title};
				count++;
			}
		});
		rs_data['rs_fileList'] = rs_fileList;
		//判断是否有未操作的文件
		if(result){
			alert("请选择上传文件或者将不上传的文件删除！");
			return false;
		}
		//如果没有上传的文件，直接将原来已上传的文件信息返回
		if(isUpload){//有上传文件
			var url = '${basePath }page/common/File/doConfirm';
			var data = {
				"map.upload_fileId" : ids,
				"map.upload_fileName" : names
			};
			$.ajax({
				type : 'POST' ,
				url : url ,
				data : data ,
				dataType : "json" ,
				async : true ,
				cache : false ,
				jsonpCallback : "jsonpCallback" ,
				success : function(response, status, statusText) {
					if (response.status) {
						if(parent.fn_${fn}){
							//alert("上传成功！");
				 			parent.fn_${fn}(rs_data);
						}else{
							//alert("系统插件错误:找不到方法${fn}");
						}
						 closeWindow();
					}else{
						alert(response.content);
					}
				}
			});
		}else{
			if(parent.fn_${fn}){
				parent.fn_${fn}(rs_data);
			}else{
				//alert("系统插件错误:找不到方法${fn}");
			}
			closeWindow();
		}
	}
	//删除数据库中的文件信息
	function delete_db(guid,id){ 
		if(confirm("删除后无法找回,请确认是否继续删除!")){
			var url = '${basePath }page/common/File/doDel';
			var data = {"map.fileId":id};
			$.ajax({
				type : 'POST' ,
				url : url ,
				data : data ,
				dataType : "json" ,
				async : true ,
				cache : false ,
				jsonpCallback : "jsonpCallback" ,
				success : function(response, status, statusText) {
					//alert(response + ":" + status + ":" + statusText);
					if(response.status){
						$("."+guid).remove();
						//alert("删除成功！");
					}else{
						//alert(response.content);
					}
				}
			});
		}
	}
	//下载已上传至数据库中的文件
	function download_db(id){
		window.location.href="${basePath }page/common/File/doDownLoad?fileId="+id;
	}
	//点击关闭按钮执行的方法
	function closeWin(){
		//返回当前对象上传文件的信息
		var rs_data=[];
		var count = 0;
		//原已上传的文件信息
		$("#content0 tr").each(function(i, o) {
			if(o.id != null && o.id != "" && o.id != 'undefined'){
				rs_data[count]={"id":o.id,"name":o.title};
				count++;
			}
		});
		//返回操作后的原来已上传的文件的信息
		if(parent.fn_${fn}){
			parent.fn_${fn}(rs_data);
		}else{
			alert("系统插件错误:找不到方法${fn}");
		}
		closeWindow();
	}
	//关闭窗口
	function closeWindow() {
		parent.w1.close();
	}
</script>
</head>
<body >
<div class="navbar navbar-default navbar-fixed-top" style="margin-top:1%;">
 <div class="container" > 
     <!-- The file upload form used as target for the file upload widget --> 
     <form id="fileupload" action='' method="POST" enctype="multipart/form-data"> 
     	<input type="hidden" id="operation_id" name="map.fileGroupId"  value="${fileGroupId }">
         <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload --> 
         <div class="row fileupload-buttonbar" style="height:30px;"> 
             <div class="col-lg-7"> 
                 <!-- The fileinput-button span is used to style the file input field as button --> 
                 <span class="btn btn-primary fileinput-button"> 
                    <i class="glyphicon glyphicon-plus"></i>
                     <span>选择文件</span> 
                     <input type="file" name="files[]" multiple> 
                 </span> 
                 <button class="btn btn-primary" type="button" onclick="confirm_()"> 
                     <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
                     <span>确定</span> 
                 </button> 
                 <button onclick="closeWin()" type="button" class="btn btn-primary">
                    <span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span>&nbsp;<span>关闭</span>
                </button>
             </div> 
         </div> 
         <div style="height:220px;overflow:auto;" > 
         	<!-- The table listing the files available for upload/download --> 
         	<table role="presentation" class="table table-striped" id="content" style="word-break:break-all; word-wrap:break-all;"><tbody class="files"></tbody></table> 
         	<table id="content0" role="presentation" class="table table-striped" style="word-break:break-all; word-wrap:break-all;">
         		<c:forEach var="file" varStatus="s" items="${fileList }">
					<tr id="${file.fileId}" title="${file.fileName}" class="${file.guid}" height="30px;">
						<td width="40%" ><span>${ file.fileName}</span></td>
						<td width="30%"></td>
						<td width="*" align="center" valign="center">
							<button class="btn btn-primary" onclick="download_db('${file.fileId}')" type="button">  
                     			<i class="glyphicon glyphicon-download"></i> 
                     			<span>下载</span> 
                 			</button>
                 			<button class="btn btn-primary" onclick="delete_db('${file.guid}','${file.fileId}')" type="button"> 
                     			<i class="glyphicon glyphicon-trash"></i> 
                     			<span>删除</span> 
                			</button> 
						</td>
					</tr>
				</c:forEach>
         	</table> 
         </div> 
     </form> 
 </div> 
 </div> 
 <!-- The template to display files available for upload --> 
 <script id="template-upload" type="text/x-tmpl"> 
 {% for (var i=0, file; file=o.files[i]; i++) { %} 
     <tr class="template-upload fade" > 
         <td width="40%"> 
             <div style="margin-top:15%;">
             {%=file.name%}
             <strong class="error text-danger"></strong> 
             </div>
         </td> 
         <td width="30%"> 
             <p class="size">Processing...</p> 
             <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div> 
         </td> 
         <td width="*" align="center">
         	<div style="margin-top:15%;"> 
             {% if (!i && !o.options.autoUpload) { %} 
                 <button class="btn btn-primary start" type="button"> 
                     <i class="glyphicon glyphicon-upload"></i> 
                     <span>上传</span> 
                 </button> 
             {% } %} 
             {% if (!i) { %} 
                 <button class="btn btn-primary cancel" type="button"> 
                     <i class="glyphicon glyphicon-trash"></i> 
                     <span>删除</span> 
                 </button> 
             {% } %} 
             </div>
         </td> 
     </tr> 
 {% } %} 
 </script> 
 <!-- The template to display files available for download --> 
 <script id="template-download" type="text/x-tmpl"> 
 {% for (var i=0, file; file=o.files[i]; i++) { %} 
     <tr class="template-download fade" id="{%=file.id%}" title="{%=file.name%}"> 
        <td width="40%"> 
                 <span>{%=file.name%}</span> 
             {% if (file.error) { %} 
                 <div><span class="label label-danger">Error</span> {%=file.error%}</div> 
             {% } %} 
         </td> 
         <td width="30%"> 
             <span class="size">{%=o.formatFileSize(file.size)%}</span>
             <div>{%=file.resultInfo%}</div>  
         </td> 
         <td width="*" align="center"> 
             	<button class="btn btn-primary start" type="button" disabled>  
                     <i class="glyphicon glyphicon-upload"></i> 
                     <span>上传</span> 
                 </button>
                 <button class="btn btn-primary cancel" type="button"> 
                     <i class="glyphicon glyphicon-trash"></i> 
                     <span>删除</span> 
                </button> 
        </td> 
     </tr> 
 {% } %} 
</script> 
</body>
</html>
